<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .container {
        width: 500px;
        position: relative; /*相对定位*/
      }
      .scroll {
        width: 100%;
        overflow-x: scroll;
      }
      /* 制作表格右边框线 */
      .container::after {
        content: "";
        display: block;
        width: 1px;
        position: absolute;
        left: 499px;
        top: 0px;
        bottom: 18px;
        background-color: #333;
      }
      .container table {
        border-collapse: collapse; /*合并单元格边框线*/
      }
      .container table.music {
        width: 800px;
      }
      /* 第一列宽 */
      .container table tr td.header {
        width: 100px;
      }
      .container table tr td,
      table tr th {
        border: 1px solid #333;
        text-align: center;
        font-weight: 400;
      }
      /*冻结列相对于最外面container绝对定位*/
      table.header {
        position: absolute;
        left: 0px;
        top: 0px;
      }
      /*冻结列样式*/
      table.header tr td {
        background-color: #ddd;
        font-weight: bold;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="scroll">
        <table class="music">
          <!-- 内容表格 -->
          <tr>
            <td class="header">分类</td>
            <td>古典</td>
            <td>现代</td>
            <td>DJ</td>
            <td>古筝</td>
          </tr>
          <tr>
            <td class="header">排名</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td class="header">歌曲</td>
            <td>爱情是从</td>
            <td>春泥</td>
            <td>我是DJ</td>
            <td>高山流水</td>
          </tr>
          <tr>
            <td class="header">歌手</td>
            <td>未知</td>
            <td>匿名</td>
            <td>不知道</td>
            <td>哈哈</td>
          </tr>
        </table>
      </div>
      <table class="header">
        <!--冻结列的布局-->
        <tr>
          <td>分类</td>
        </tr>
        <tr>
          <td>排行</td>
        </tr>
        <tr>
          <td>歌曲</td>
        </tr>
        <tr>
          <td>歌手</td>
        </tr>
      </table>
    </div>
  </body>
</html>
